import React from 'react'
import { useNavigate } from 'react-router'
import styles from './index.module.less'

export default function Home() {
  const navigate = useNavigate()
  const userData = JSON.parse(localStorage.getItem('user')) || {}
  // console.log("userData.user:", userData.user);
  const nickname = userData.user?.nickname || '小帅'
  const plans = userData.plans || []

  return (
    <div className={styles.home}>
      {/* 顶部欢迎语 */}
      <div className={styles.top}>
        <h2>Hi~{nickname}同学👋</h2>
        <p>今天也要继续哦💪</p>
      </div>

      {/* 卡片区 */}
      <div className={styles.cards}>
        <div className={styles.card} onClick={() => navigate('/plan')}>
          今日计划
        </div>
        <div className={styles.card} onClick={() => navigate('/ai')}>
          AI助手
        </div>
        <div className={styles.card} onClick={() => navigate('/data')}>
          个人数据
        </div>
      </div>

      {/* 今日计划 */}
      <div className={styles.todayPlan}>
        <h3>今日计划</h3>
        <div className={styles.planContainer}>
          {plans.length ? (
            plans.map((plan) => (
              <div key={plan.id} className={styles.planItem}>
                <p>运动项目：{plan.sports_item}</p>
                <p>饮食项目：{plan.food_item}</p>
              </div>
            ))
          ) : (
            <p>暂无计划</p>
          )}

        </div>
      </div>
    </div>
  )
}
